<template>
  <div class="app-container">
    <div class="m-content-box">
      <div class="normal-mini">
        <div class="normal-mini-guide">
          <img loading="lazy" src="../../../public/img/normal-mini-tips.png" alt="">
        </div>
        <div class="code-wrap">
          <div id="normalMiniDis" class="code-inner">
            <div class="code-inner__title">自助约课助手</div>
            <div class="code-inner__code-box">
              <div class="code-inner__code">
                <img src="../../../public/img/normal-mini-dis.png" alt="">
              </div>
            </div>
            <div class="code-inner__tips">您尚未开通约课小程序或者小程序已到期请联系您的专属客服进行开通</div>
          </div>
          <div id="normalMiniActive" class="code-inner code-inner_active hide">
            <div class="code-inner__title">自助约课助手</div>
            <div class="code-inner__code-box">
              <div id="normalMiniCode" class="code-inner__code" />
            </div>
            <div class="code-inner__tips">扫码约课更方便<br>场馆活动早知道</div>
            <button class="code-inner__btn js-down-qrcode">下载小程序码</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getXuan } from '@/utils/limits.js'
import { mapGetters } from 'vuex' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: {},
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'permission_routes',
      'roles'
    ])
  },
  created() {
    var xuanList = [{
      name: '约课助手小程序',
      url: '/normalMini/index',
      pd: true
    }]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 0
    })
  },
  methods: {
  }
}
</script>

<style scoped>
.m-content-box {
  position: relative;
  padding: 30px 63px;
}
.normal-mini {
  position: relative;
}
.normal-mini-guide {
  width: 619px;
}
.code-wrap {
  position: absolute;
  top: 30px;
  left: 695px;
}
.code-inner {
  width: 320px;
  height: 500px;
  background: #f2f2f2;
  border-radius: 8px;
}
.code-inner_active {
  background: #fe8e60 linear-gradient(321deg, #ff7b45 0, #ff9165 100%);
}

.code-inner {
  width: 320px;
  height: 500px;
  background: #f2f2f2;
  border-radius: 8px;
}
.hide, .js-data, .todo-next {
  display: none !important;
}
.code-inner__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 30px 0;
  text-align: center;
}
.code-inner__code-box {
  margin: 0 auto 20px;
  width: 220px;
  height: 220px;
  background: #ffffff;
}
.code-inner__tips {
  margin-bottom: 36px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
</style>
